<template>
  <div class="app-container">
    <FormData @registerDispose="getstatus" @handleQuery="getfinancialData"></FormData>
    <el-dialog title="物品处置" :visible.sync="dialogVisible" width="30%">
      <el-button type="primary" @click="tuihuan">退还</el-button>
      <el-button type="primary" @click="yijiao">移交</el-button>
      <el-button type="primary" @click="xiaohui">销毁</el-button>
    </el-dialog>

    <!-- 退还操作 -->
    <tuihuan ref="tuihuans" @guanbi="guanbituihuan(status)" @genxing="tuihuangenxing"></tuihuan>

    <!-- 移交操作 -->
    <yijiao ref="yijiao" @guanbi="guanbiyijiao(status)" @genxing="tuihuangenxing"></yijiao>

    <!-- 销毁操作 -->
    <xiaohui ref="xiaohui" @guanbi="guanbixiaohui(status)" @genxing="tuihuangenxing"></xiaohui>

    <!-- 详情页 -->
    <el-form :model="xianqingData">
      <el-row
        ><el-col :span="24">
          <el-dialog title="详情" :visible.sync="xianqing_dialog" class="dialog">
            <el-row>
              <el-col :span="12"
                ><el-form-item label="物品名称">
                  {{ xianqingData.pName }}
                </el-form-item></el-col
              >
              <el-col :span="12"
                ><el-form-item label="物品类型">
                  {{ xianqingData.type }}
                </el-form-item></el-col
              >
            </el-row>
            <el-row>
              <el-col :span="12"
                ><el-form-item label="入库照片">
                  <image-preview
                    :src="xianqingData.storeImg"
                    :width="150"
                    :height="150"
                  /> </el-form-item
              ></el-col>
              <el-col :span="12"
                ><el-form-item label="出库照片">
                  <image-preview
                    :src="xianqingData.deliverImg"
                    :width="150"
                    :height="150"
                  /> </el-form-item
              ></el-col>
            </el-row>
            <el-row>
              <el-col :span="12"
                ><el-form-item label="办案人员">
                  {{ xianqingData.phName }}
                </el-form-item></el-col
              >
              <el-col :span="12"
                ><el-form-item label="仓库人员">
                  {{ xianqingData.manager }}
                </el-form-item></el-col
              >
            </el-row>
            <el-row>
              <el-col :span="12"
                ><el-form-item label="仓库">
                  {{ xianqingData.wName }}
                </el-form-item></el-col
              >
              <el-col :span="12"
                ><el-form-item label="物品数量">
                  {{ xianqingData.count }}
                </el-form-item></el-col
              >
            </el-row>
            <el-row>
              <el-col :span="24"
                ><el-form-item label="登记时间">
                  {{ xianqingData.registryTime }}
                </el-form-item></el-col
              >
            </el-row>
          </el-dialog></el-col
        ></el-row
      >
    </el-form>

    <el-table
      v-loading="loading"
      element-loading-text="加载中"
      :data="data"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" type="index" />
      <el-table-column label="物品名称" align="center" prop="pName" />
      <el-table-column label="物品类型" align="center" prop="type" />
      <el-table-column label="数量" align="center" prop="count" />
      <el-table-column label="入库照片" align="center" prop="store_img">
        <template slot-scope="scope" class="imgbox">
          <image-preview :src="scope.row.storeImg || ''" :width="50" :height="50" />
        </template>
      </el-table-column>
      <el-table-column label="出库照片" align="center" prop="deliver_img">
        <template slot-scope="scope" class="imgbox">
          <image-preview :src="scope.row.deliverImg || ''" :width="50" :height="50" />
        </template>
      </el-table-column>
      <el-table-column label="办案人员" align="center" prop="phName" />
      <el-table-column label="仓库" align="center" prop="wName" />
      <el-table-column label="仓库管理员" align="center" prop="manager" />
      <el-table-column label="登记时间" align="center" prop="create_time">
        <template slot-scope="scope">
          {{ geshihuaDateTime(scope.row.pCreateTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="xianqing(scope.row)"
            v-hasPermi="['system:info:edit']"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <Pagination
      class="page-container"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="pageGetList"
    ></Pagination>
  </div>
</template>
<script>
import {
  listTreatment,
  getTreatment,
  addTreatment,
  updateTreatment,
  delTreatment
} from '@/api/system/treatment'
import { listInfo } from '@/api/system/financial_treatment'
import tuihuan from './chuzhi/tuihuan.vue'
import yijiao from './chuzhi/yijiao.vue'
import xiaohui from './chuzhi/xiaohui.vue'
import moment from 'moment'
export default {
  components: {
    tuihuan,
    yijiao,
    xiaohui
  },
  data() {
    return {
      dialogVisible: false,
      xianqing_dialog: false,

      tuihuan_dialog: true,
      yijiao_dialog: false,
      xiaohui_dialog: false,

      // 总条数
      total: 0,

      // 分页查询
      queryParams: {
        registryStatus: 3,
        pageNum: 1,
        pageSize: 10
      },

      tanchaungdata: [],
      data: [],
      loading: true,
      selection: [],
      xianqingData: {},
      sosuodata: null,
      pageNum: null,
      pageSize: null
    }
  },
  mounted() {
    this.pageGetList()
    this.getData()
    setTimeout(() => {
      this.loading = false
    }, 500)
  },
  methods: {
    // 加载获取数据
    getData() {
      this.sosuodata.registryStatus = 3
      listInfo(this.sosuodata).then((res) => {
        this.data = res.rows
      })
    },

    // 得到搜索的值
    getfinancialData(data) {
      this.sosuodata = data
      this.pageSize = data.pageSize
      this.pageNum = data.pageNum
      this.getData()
    },

    //得到状态
    getstatus(e) {
      if (this.selection.length == 0) {
        alert('请选择需要操作的数据!')
      } else {
        this.dialogVisible = true
      }
    },

    // 打开退还对话框
    tuihuan() {
      this.dialogVisible = false
      this.$refs.tuihuans.status = true
      this.$refs.tuihuans.data = this.selection
    },

    //关闭退还对话框
    guanbituihuan(status) {
      this.tuihuan_dialog = false
    },

    tuihuangenxing() {
      this.getData()
    },

    // 打开移交对话框
    yijiao() {
      this.dialogVisible = false
      this.$refs.yijiao.status = true
      this.$refs.yijiao.data = this.selection
    },

    //关闭移交对话框
    guanbiyijiao(status) {
      this.yijiao_dialog = status
    },

    // 打开销毁对话框
    xiaohui() {
      this.dialogVisible = false
      this.$refs.xiaohui.status = true
      this.$refs.xiaohui.data = this.selection
    },

    //关闭销毁对话框
    guanbixiaohui(status) {
      this.xiaohui_dialog = status
    },

    //获取选中的数据操作
    handleSelectionChange(selection) {
      selection.forEach((item) => {
        for (let key in item) {
          if (item[key] == null) {
            item[key] = ''
          }
        }
      })
      this.selection = selection
    },
    //打开详情对话框
    xianqing(data) {
      this.xianqing_dialog = true
      this.xianqingData = data
    },
    //获取需要修改的pId
    getselectionData() {
      this.selection.forEach((res) => {
        for (let key in res) {
          if ((key = 'pId')) {
            this.pId.push(res[key])
          }
        }
      })
      this.pId = this.pId.filter((item, index, self) => self.indexOf(item) === index)
    },
    //时间格式化
    geshihuaDateTime(time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    },
    //时间格式化
    geshihuaDate(time) {
      return moment(time).format('YYYY-MM-DD')
    },
    //时间修改时触发
    update() {},
    show() {
      if (this.selection.length == 0) {
        alert('请选择需要处理的数据')
      } else {
        this.dialogVisible = true
      }
    },
    // 分页处理
    pageGetList() {
      listInfo(this.queryParams).then((res) => {
        this.data = res.rows
        this.total = res.total
      })
    }
  }
}
</script>
<style>
.imgbox {
  height: 200px;
  overflow-y: scroll;
  border: 1px solid rgb(244, 236, 221);
}
::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  max-width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  border-radius: 10px;
}
</style>
